/**
 * Created by ziyu on 17/3/7.
 */
import React, {Component, PropTypes} from 'react'
import {Table, Card, Button, Row, Col, Icon, Tag, message} from 'antd'
import styles from './Index.less'
import {fetchPost} from "../../../utils/request";

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      params: props.params,
      mobile: null,
      tradeNo: null,
      outboundList: [],
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 20
      }
    }
  }

  componentDidMount() {
    this.getData()
  }

  componentWillReceiveProps(props) {
    if (props.params != this.state.params) {
      this.setState({
        params: props.params
      }, () => {
        this.getData()
      })
    }
  }

  getData() {
    this.setState({
      loading: true
    })
    let {startDate, endDate, type, outboundStatus} = {...this.state.params}
    fetchPost(`/collection/outbound/call/list?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, {
      startDate,
      endDate,
      type,
      status: outboundStatus,
    }).then((res) => {
      if (res.code === 0) {
        this.setState({
          outboundList: res.data.outboundList,
          page: {
            ...this.state.page,
            totalCount: res.page.totalCount || 0
          },
        }, () => {
          if (this.state.outboundList != null && this.state.outboundList.length > 0) {
            this.props.chooseOrder({
              'item': this.state.outboundList[0]
            })
          }
        })
        this.setState({
          loading: false
        })
      } else {
        message.error(res.msg)
        this.setState({
          outboundList: [],
        })
      }
    })
  }

  // 单击行
  handleClickRow(record) {
    this.setState({
      mobile: record.mobile,
      tradeNo: record.tradeNo
    }, () => {
      this.props.chooseOrder({
        'item': record
      })
    })
  }

  // 单击行 样式改变
  handleChosedRow(itemId) {
    if (itemId == this.state.id) {
      return styles.active
    } else {
      return styles.listRow
    }
  }

  nextpage(current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData()
    })
  }

  render() {
    let self = this
    const columns = [
      {
        title: 'batchNo',
        dataIndex: 'batchNo',
        key: 'batchNo'
      },
      {
        title: 'botenceId',
        dataIndex: 'botenceId',
        key: 'botenceId',
      },
      {
        title: 'tradeNo',
        dataIndex: 'tradeNo',
        key: 'tradeNo',
      },
      {
        title: 'mobile',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: 'status',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: 'callStartTime',
        dataIndex: 'callStartTime',
        key: 'callStartTime',
      },
      {
        title: 'billSec',
        dataIndex: 'billSec',
        key: 'billSec',
      },
    ]

    const pagination = {
      current: this.state.page.currentPage,
      total: this.state.page.totalCount || 0,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal(total) {
        return `Total ${total} `;
      },
      onChange(current) {
        self.nextpage(current)
      }
    }

    return (
      <div className='ant-layout-container'>
        <Card bodyStyle={{padding: 0, height: 820}} bordered={false} noHovering={true}>
          <Table pagination={pagination} key='mobile' columns={columns}
                 dataSource={self.state.outboundList}
                 loading={self.state.loading}
                 bordered
                 onRowClick={(record) => this.handleClickRow(record)}
                 rowClassName={(record) => this.handleChosedRow(record.collectionNo)}
                 size='small'
          />
        </Card>
      </div>

    )
  }
}

export default List
